<template>
  <el-descriptions
    class="margin-top"
    title="个人信息"
    :column="3"
    :size="size"
    border
  >
    <template #extra>
      <el-button type="primary" @click="dialogFormVisible = true"
        >修改</el-button
      >
    </template>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle"><user /></el-icon>
          姓名
        </div>
      </template>
      {{ administrators.name }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle"><user /> </el-icon>
          用户号
        </div>
      </template>
      {{ administrators.haoma }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle"><user /> </el-icon>
          性别
        </div>
      </template>
      {{ administrators.xingbie }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle"><user /> </el-icon>
          身份证
        </div>
      </template>
      {{ administrators.ids }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle"><iphone /></el-icon>
          QQ
        </div>
      </template>
      {{ administrators.qq }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle"><iphone /></el-icon>
          电话
        </div>
      </template>
      {{ administrators.phone }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle"><iphone /></el-icon>
          工作类型
        </div>
      </template>
      {{ administrators.job }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle"><location /></el-icon>
          地址
        </div>
      </template>
      {{ administrators.dizhi }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle"><tickets /></el-icon>
          摘要
        </div>
      </template>
      <el-tag size="small">武汉某公司</el-tag>
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle"><office-building /> </el-icon>
          公司
        </div>
      </template>
      武汉房产销售有限公司
    </el-descriptions-item>
  </el-descriptions>
  <el-descriptions
    class="margin-top"
    title="公司信息"
    :column="1"
    :size="size"
    border
  >
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle"><office-building /> </el-icon>
          公司
        </div>
      </template>
      武汉房产销售有限公司
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle"><office-building /> </el-icon>
          公司简介
        </div>
      </template>
      我们只做最好的服务，房地产服务行业服务于房地产市场,服务内容包括为开发商提供新房的顾问策划和代理销售,为二手房的买卖或租赁双方提供经纪服务...
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle"><office-building /> </el-icon>
          公司
        </div>
      </template>
      武汉房产销售有限公司
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle"><office-building /> </el-icon>
          公司活动
        </div>
      </template>
      无
    </el-descriptions-item>
  </el-descriptions>
  <el-dialog v-model="dialogFormVisible" title="修改管理员信息">
    <el-form :model="form">
      <el-form-item label="名字" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="电话" :label-width="formLabelWidth">
        <el-input v-model="form.phone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="QQ" :label-width="formLabelWidth">
        <el-input v-model="form.qq" autocomplete="off" />
      </el-form-item>
      <el-form-item label="性别" :label-width="formLabelWidth">
        <el-input v-model="form.xingbie" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogForm"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed, ref, reactive } from "vue";
import {
  Iphone,
  Location,
  OfficeBuilding,
  Tickets,
  User,
} from "@element-plus/icons-vue";
import apiUrl from "../api/urls";
import link from "../api/link";
import { useRouter } from "vue-router";

const size = ref("");
const router = useRouter();

const dialogTableVisible = ref(false);
const dialogFormVisible = ref(false);

const formLabelWidth = "140px";

const form = reactive<any>({
  name: "",
  phone: "",
  qq: "",
  xingbie: "",
});

// const xinxis=ref<any>("")
const administrators = ref<any>({});
(async () => {
  link(apiUrl.Administrator).then((res: any) => {
    administrators.value = res.data[0];
  });
})();
//图标样式
const iconStyle = computed(() => {
  const marginMap = {
    large: "8px",
    default: "6px",
    small: "4px",
  };
  return {
    marginRight: marginMap[size.value] || marginMap.default,
  };
});

//数据更新
const dialogForm = (nums) => {
  // console.log(form);
  dialogFormVisible.value = false;

  let data = {
    name: form.name,
    haoma: administrators.value.haoma,
    phone: form.phone,
    ids: administrators.value.ids,
    qq: form.qq,
    xingbie: form.xingbie,
    job: administrators.value.job,
    dizhi: administrators.value.dizhi,
    gongsi: administrators.value.gongsi,
  };
  link(apiUrl.Administrator + "/" + "1", "PUT", data).then((res: any) => {
    console.log(res);
    router.go(0);
  });
};
</script>

<style >
.el-descriptions {
  padding: 20px 100px 20px 100px;
}
</style>